import React, {useContext} from "react";
import classNames from "classnames";
import {meunContext} from './Menu'

export interface MeunItemProps {
  index?: number
  disabled?: boolean
  className?: string
  style?: React.CSSProperties
  onClick?: Function
}


const MeunItem: React.FC<MeunItemProps> = (props) => {
  const meunContextValue = useContext(meunContext)
  const {index, style, className, disabled, children, onClick} = props
  const classos = classNames('meun-item', className , {
    'meun-item-disabled': disabled,
    'meun-item-vertical-ok-ist': meunContextValue.propsMode === 'vertical' && meunContextValue.index === index,
    'meun-item-horizontal-ok-ist': meunContextValue.propsMode === 'horizontal'&& meunContextValue.index === index
  })
  const itemClick = () => {
    if (meunContextValue.onSelect && !disabled) {
      meunContextValue.onSelect(index? index : 0)
    }
    if (onClick && !disabled) {
      onClick()
    }
  }
  return (
    <li className={classos} style={style} onClick={itemClick}>
      {children}
    </li>
  )
}
MeunItem.displayName = 'MeunItem'

export default MeunItem